{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div class="row">
  <div id="showback_user_container" class="left medium-4 columns">
    <label for="showback_user_select">{{tr "Filter by user"}}</label>
    <div id="showback_user_select"/>
  </div>
  <div id="showback_group_container" class="left medium-4 columns">
    <label for="showback_group_select">{{tr "Filter by group"}}</label>
    <div id="showback_group_select"/>
  </div>
  <div id="showback_button_container" class="right medium-4 columns">
    <button class="button radius success right large-12" id="showback_submit" type="button">
      {{tr "Get showback"}}
    </button>
  </div>
</div>
<div id="showback_placeholder">
  <div class="row">
    <div class="large-8 large-centered columns">
      <div class="text-center">
        <span class="fa-stack fa-5x" style="color: #dfdfdf">
          <i class="fa fa-cloud fa-stack-2x"></i>
          <i class="fa fa-money fa-stack-1x fa-inverse"></i>
        </span>
        <div id="showback_no_data" hidden>
          <br>
          <p style="font-size: 18px; color: #999">
            {{tr "There are no showback records"}}
          </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="showback_content" hidden>
    <div class="row showback_table">
      <div class="large-12 columns graph_legend">
        <h3 class="subheader">{{tr "Showback"}}</h3>
      </div>
      <div class="medium-6 columns" style="overflow:auto">
        <table id="showback_datatable" class="datatable hover">
          <thead>
            <tr>
              <th>dateint</th>
              <th>{{tr "Year"}}</th>
              <th>{{tr "Month"}}</th>
              <th>{{tr "Date"}}</th>
              <th>{{tr "Cost"}}</th>
            </tr>
          </thead>
          <tbody id="tbody_showback_datatable">
          </tbody>
        </table>
        <span class="label secondary radius showback_select_a_row">
          {{tr "Select a row to get detailed information of the month"}}
        </span>
      </div>
      <div class="medium-6 columns">
        <div class="large-12 columns centered graph" id="showback_graph" style="height: 200px;">
        </div>
      </div>
    </div>
    <div class="row showback_vms_table" hidden>
      <div class="large-12 columns graph_legend">
        <h3 class="subheader" id="showback_vms_title">{{tr "VMs"}}</h3>
      </div>
      <div class="large-12 columns" style="overflow:auto">
        <table id="showback_vms_datatable" class="datatable twelve">
          <thead>
            <tr>
              <th>{{tr "ID"}}</th>
              <th>{{tr "Name"}}</th>
              <th>{{tr "Owner"}}</th>
              <th>{{tr "Hours"}}</th>
              <th>{{tr "Cost"}}</th>
            </tr>
          </thead>
          <tbody id="tbody_showback_datatable">
          </tbody>
        </table>
      </div>
    </div>
  </div>
